<template>
	<div id="building">
		<div class="mobile_login">
			<div class="header">
				<button @click="go(-1)" class="btn">
					<i class="el-icon-arrow-left"></i>
				</button>
				<h1>登录</h1>
			</div>
			<i class="el-icon-location-outline icon"></i>
			 <el-input
			    placeholder="请输入账号"
			    prefix-icon="el-icon-user-solid"
			    v-model="user.username">
			  </el-input>
			  <el-input
				 type="password"
			     placeholder="请输入密码"
			     prefix-icon="el-icon-lock"
			     v-model="user.password">
			   </el-input>
			    <el-button type="primary" plain @click="login()">登录</el-button>
		</div>
	</div>
</template>

<script>
	export default{
		name : 'MobileLogin',
		data() {
			return{
				input:'',
				input2:'',
				user: {
					username: '',
					password: '',
				},
			}
		},
		methods:{
			go(i){
				this.$router.go(i);
			},
			login(){
				
				this.$postk('/api/login',this.user).then((resp)=>{
					let token=resp.data.data.token;
					window.localStorage.setItem("token",token);
					token = "Bearer " + token;
					let h = {
						headers: {
							'Authorization': token,}}
					this.$get('/api/user/info',h).then((rsp)=>{
						this.$store.state.name = rsp.data.data.name;
						this.$store.state.img = rsp.data.data.img;
					})
					this.$router.push("/mobile/my");
				})
			}
		}
	}
</script>

<style scoped>
	#building{
		background-color:#f5d5a0;
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
	}
	.mobile_login{
		text-align: center;
	}
	.mobile_login .header{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 0.5rem;
	}
	.btn{
		border: none;
		background-color: #f5d5a0;
		position: absolute;
		top: 1;
		left: 0;
	}
	.mobile_login .icon{
		font-size: 14rem;
		margin-bottom: 5rem;
		margin-top: 1rem;
	}
	/deep/ .el-input__inner{
		margin-bottom: 2rem;
		width: 16rem !important;
		border-radius: 5rem;
		caret-color: #f5d5a0;
		outline: none;
		border: none;
	}
	/deep/ .el-input__prefix{
		left: 87px;
		font-size: 1.2rem;
		height: 0;
	}
	/deep/ .el-button--primary.is-plain{
		width: 16rem;
		background-color: antiquewhite;
		border-color: #f5d5a0;
		color: black;
	}
</style>